<!--报文解析模块-->
<template>
  <div>
    <Main></Main>
    <Tabs>
      <TabPane label="报文解析" icon="logo-apple">
        <Row>
          <Col span="4">
            <Table height="800" :columns="contextColumns" :data="contextList"
                   @on-row-click="openContext"></Table>
          </Col>
          <Col span="20">
            <!--            加载报文解析组件-->
            <ContextLoad></ContextLoad>
          </Col>
        </Row>
        <Row>
          <Col span="4">
            <Button type="primary" @click="addContext">新增</Button>
          </Col>
          <Col span="20">

          </Col>
        </Row>

      </TabPane>
      <TabPane label="设置" icon="logo-tux">标签三的内容</TabPane>
    </Tabs>

  </div>
</template>

<script>
import ContextLoad from "./ContextLoad";
import Main from "./Main";
import {v4} from "uuid";

import electron from "electron";
import _ from "lodash";
import bus from "emitvue";

const store = electron.remote.getGlobal('store');
const utils = require('./lib/utils');

export default {
  name: "ContextParse",
  components: {
    ContextLoad,
    Main,
  },
  data() {
    return {
      contextList: [],
      contextColumns: [
        {
          title: '报文规则',
          key: "name",
        },
        {
          title: "操作",
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.removeContext(params.index)
                  }
                }
              }, 'Delete')
            ]);
          },
          width: "100px",
        }
      ]
    }
  },
  methods: {
    // 打开单个需要解析的报文
    openContext(data, index) {
      bus.$emit('openContext', this.contextList[index])
    },

    // 删除报文规则
    removeContext(index) {
      this.contextList.splice(index, 1);
    },

    // 新增报文规则
    addContext() {
      let name = v4();
      this.contextList.push({
        name,
        data: {
          name,
          rules: [],
        },
      });
      store.set('contextList', JSON.stringify(this.contextList));
      console.log('新增并保存规则');
    },

    // 获取所有的报文列表
    getAllContextList() {
      let list = store.get('contextList');
      list = utils.safeJsonParse(list);
      if (!list || !_.isArray(list)) {
        list = [];
        store.set('contextList', JSON.stringify(list));
      }
      this.contextList = list;
    },
    saveSingleRule(data) {
      let find = false;
      let index = -1;
      console.log('name  = ', data.rawName);

      for (let i = 0; i < this.contextList.length; i++) {
        if ((this.contextList[i].name === data.rawName) && !find) {
          find = true;
          index = i;
        } else if ((this.contextList[i].name === data.rawName) && find) {
          this.$Message.error("报文规则名称不能重复");
          return;
        }
      }

      // 没找到对应的接口
      if (index === -1) {
        this.$Message.error('软件出现问题 进行重置！');
        this.contextList = [];
        store.set('interfaceList', JSON.stringify(this.contextList));
        return;
      }

      data.rawName = data.name;
      this.contextList[index].name = data.name;
      this.contextList[index].rules = data.rules;
      store.set('contextList',JSON.stringify(this.contextList));
      this.$Message.success('保存报文规则成功');
    },
  },
  mounted() {
    this.getAllContextList();
    bus.$on('saveContextRule', (data) => {
      this.saveSingleRule(data);
    })
  }
}
</script>

<style>

</style>
